<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>考勤管理</el-breadcrumb-item>
      <el-breadcrumb-item>考勤设置</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 内容 -->
    <div id="shang">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>上下班时间设置</span>
        </div>
        <div>
          <el-button type="primary" @click="open">新增</el-button>
          <!-- 列表 -->
          <el-table :data="tableData2" stripe style="width: 100%">
            <el-table-column prop="id" label="ID" width="60"> </el-table-column>
            <el-table-column prop="colony" label="考勤归属地">
            </el-table-column>
            <el-table-column prop="forenoon" label="上午上班时间">
            </el-table-column>
            <el-table-column prop="afternoon" label="下午上班时间">
            </el-table-column>
            <el-table-column prop="department_name" label="使用部门">
            </el-table-column>
            <el-table-column prop="man_hour" label="工时"> </el-table-column>
            <el-table-column prop="state" label="状态"> </el-table-column>
            <el-table-column label="操作" width="260">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="handleDelete2(scope.$index, scope.row)"
                  >查看</el-button
                >
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[5, 10, 15]"
              :page-size="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPage"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>

      <el-card class="box-card" id="shang2">
        <div slot="header" class="clearfix">
          <span>工作日设置</span>
        </div>
        <div>
          <el-calendar v-model="value"></el-calendar>

          <ul id="tishi">
            <li>
              <div id="yuan1"></div>
              法定节假日
            </li>
            <li>
              <div id="yuan2"></div>
              周末
            </li>
            <li>
              <div id="yuan3"></div>
              公司假期
            </li>
          </ul>

        </div>
      </el-card>
    </div>
    <!-- 弹窗1 -->
    <el-dialog title="新增考勤" :visible.sync="dialogFormVisible">
      <el-form :model="myform" :disabled="s1">
        <el-form-item label="考勤归属地" :label-width="formLabelWidth" required>
          <el-input v-model="myform.colony" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="上午上班时间"
          :label-width="formLabelWidth"
          required
        >
          <el-input v-model="myform.forenoon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="下午下班时间"
          :label-width="formLabelWidth"
          required
        >
          <el-input v-model="myform.afternoon" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="部门" :label-width="formLabelWidth" required>
          <el-select v-model="myform.department" placeholder="请选择">
            <el-option label="人事部" value="1"></el-option>
            <el-option label="行政部" value="2"></el-option>
            <el-option label="财务部" value="3"></el-option>
            <el-option label="销售部" value="4"></el-option>
            <el-option label="市场部" value="5"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="工作时长" :label-width="formLabelWidth" required>
          <el-input v-model="myform.man_hour" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-select v-model="myform.state" placeholder="请选择">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import axios from "axios";
// import { FunnelChart } from 'echarts/charts';

export default {
  data: function () {
    return {
      visible: false,
      s2: 1, //弹窗点击确定时的状态
      s1: false, //输入框是否禁用
      value: new Date(),
      tableData: [], //渲染请求后返回的数据的容器
      tableData2: [], //渲染当前页的数据
      tableData3: [], //原始数据，用于重置
      currentPage4: 1, //当前页码
      mytotal: 1, //总条数
      myval: 5, //当前页条数
      dialogTableVisible: false,
      dialogFormVisible: false,
      myform: {
        id: "",
        colony: "",
        forenoon: "",
        afternoon: "",
        department: "",
        man_hour: "",
        state: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    // 一个将日期转换成自己想要的格式的方法
    transferTime(time) {
      if (time) {
        var d = new Date(time);
        var date =
          d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
        return date;
      } else {
        return "";
      }
    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.myval = val;
      this.RenderData(this.currentPage4, this.mytotal);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.RenderData(this.currentPage4, this.myval);
    },

    // 渲染的函数
    RenderData(num, num2) {
      this.tableData2 = this.tableData.slice((num - 1) * num2, num * num2);
    },

    // 打开弹窗
    open() {
      this.dialogFormVisible = true;
      this.s2 = 1;
      this.formatting();
    },

    // 编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.formatting();

      this.s2 = 3;

      this.myform.colony = row.colony;
      this.myform.forenoon = row.forenoon;
      this.myform.afternoon = row.afternoon;
      switch (row.department_name != "") {
        case row.department_name == "人事部":
          this.myform.department = 1;
          break;
        case row.department_name == "行政部":
          this.myform.department = 2;
          break;
        case row.department_name == "财务部":
          this.myform.department = 3;
          break;
        case row.department_name == "销售部":
          this.myform.department = 4;
          break;
        case row.department_name == "市场部":
          this.myform.department = 5;
          break;
      }
      this.myform.man_hour = row.man_hour;
      this.myform.state = row.state;
      this.myform.id = row.id;
    },
    // 删除
    handleDelete(index, row) {
      this.s2 = 4;
      this.myform.id = row.id;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(2);
          axios({
            method: "get",
            url: "/atten/atten_set_del",
            params: {
              id: this.myform.id,
            },
          }).then((res) => {
            if (res.data == "错误") {
              this.$message.error("删除错误，请重试");
            } else {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.xuanran();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查看
    handleDelete2(index, row) {
      this.s2 = 2;

      this.myform.colony = row.colony;
      this.myform.forenoon = row.forenoon;
      this.myform.afternoon = row.afternoon;
      this.myform.man_hour = row.man_hour;
      this.myform.state = row.state;
      this.myform.id = row.id;
      this.dialogFormVisible = true;
      this.s1 = true;

      // console.log(index, row);
    },
    // 清空弹窗
    tanchuang() {
      this.myform.colony = "";
      this.myform.forenoon = "";
      this.myform.afternoon = "";
      this.myform.department = "";
      this.myform.man_hour = "";
      this.myform.state = "";
    },
    // 格式化弹窗
    formatting() {
      this.s1 = false;
      this.tanchuang();
    },
    // 新增
    add() {
      this.dialogFormVisible = false;

      if (this.s2 == 1) {
        // 转换启用
        if (this.myform.state == 1) {
          this.myform.state = "启用";
        }
        if (this.myform.state == 2) {
          this.myform.state = "禁用";
        }
        // 去除空格
        let colony = this.myform.colony;
        colony = colony.replace(/\s*/g, "");

        let forenoon = this.myform.forenoon;
        forenoon = forenoon.replace(/\s*/g, "");

        let afternoon = this.myform.afternoon;
        afternoon = afternoon.replace(/\s*/g, "");

        let department = this.myform.department;

        let man_hour = this.myform.man_hour;
        man_hour = man_hour.replace(/\s*/g, "");

        let state = this.myform.state;
        state = state.replace(/\s*/g, "");

        axios({
          method: "get",
          url: "/atten/atten_set_add",
          params: {
            colony: colony,
            forenoon: forenoon,
            afternoon: afternoon,
            department: department,
            man_hour: man_hour,
            state: state,
            id: this.myform.id,
          },
        }).then((res) => {
          if (res.data == "错误") {
            this.$message.error("修改错误，请检查输入字段");
          } else {
            this.$message({
              message: "添加成功",
              type: "success",
            });
          }
        });
      } else if (this.s2 == 2) {
        this.formatting();
      } else if (this.s2 == 3) {
        console.log(this.myform);
        // 转换启用
        if (this.myform.state == 1) {
          this.myform.state = "启用";
        }
        if (this.myform.state == 2) {
          this.myform.state = "禁用";
        }
        // 去除空格
        let colony = this.myform.colony;
        colony = colony.replace(/\s*/g, "");

        let forenoon = this.myform.forenoon;
        forenoon = forenoon.replace(/\s*/g, "");

        let afternoon = this.myform.afternoon;
        afternoon = afternoon.replace(/\s*/g, "");

        let department = this.myform.department;

        let man_hour = this.myform.man_hour;
        man_hour = String(man_hour);
        man_hour = man_hour.replace(/\s*/g, "");

        let state = this.myform.state;
        state = state.replace(/\s*/g, "");

        let id = this.myform.id;

        axios({
          method: "get",
          url: "/atten/atten_set_alter",
          params: {
            colony: colony,
            forenoon: forenoon,
            afternoon: afternoon,
            department: department,
            man_hour: man_hour,
            state: state,
            id: id,
          },
        }).then((res) => {
          if (res.data == "错误") {
            this.$message.error("添加错误，请检查输入字段");
          } else {
            this.$message({
              message: "添加成功",
              type: "success",
            });
          }
        });
      }
      this.xuanran();
      console.log(this.s2);
    },
    //渲染的函数
    xuanran() {
      axios({
        method: "get",
        url: "/atten/Atten_set_render",
      }).then((res) => {
        this.tableData = res.data;
        for (let i = 0; i < res.data.length; i++) {
          this.tableData3.push(res.data[i]);
        }
        this.RenderData(this.currentPage4, this.myval);
      });
    },
  },
  computed: {
    // 监督总条数
    totalPage() {
      if (this.tableData != undefined) {
        return (this.mytotal = this.tableData.length);
      }
    },
    mytan() {
      if (this.dialogFormVisible == false) {
        return false;
      }
    },
  },
  //钩子函数
  // 页面加载就渲染,
  created: function () {
    axios({
      method: "get",
      url: "/atten/Atten_set_render",
    }).then((res) => {
      this.tableData = res.data;
      for (let i = 0; i < res.data.length; i++) {
        this.tableData3.push(res.data[i]);
      }
      this.RenderData(this.currentPage4, this.myval);
    });
  },
  mounted: function () {
    let yer = document.getElementsByClassName("el-calendar-day");
    for (let i = 0; i < yer.length; i++) {
      if ((i + 2) % 7 == 0 || (i + 1) % 7 == 0) {
        yer[i].style.backgroundColor = "rgba(196,215,214,0.1)";
        let biao = document.createElement("div");
        yer[i].appendChild(biao);
        yer[i].style.position = "relative";
        yer[i].lastChild.style.position = "absolute";
        yer[i].lastChild.style.width = "7px";
        yer[i].lastChild.style.height = "7px";
        yer[i].lastChild.style.borderRadius = "50%";
        yer[i].lastChild.style.backgroundColor = "#c4d7d6";
        yer[i].lastChild.style.bottom = "12px";
      }
    }
  },
};
</script>
<style scoped lang="less">
.clear::after {
  display: block;
  content: "";
  clear: both;
}
.el-card.is-always-shadow {
  box-shadow: none;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
#shang {
  margin-top: 24px;
}
#shang2 {
  margin-top: 24px;
}
.block {
  float: right;
  padding: 24px 0;
}
.el-input--suffix .el-input__inner {
  width: 100%;
}
.el-select {
  display: block;
}
ul{
  padding-left: 24px;
  li{
    list-style: none;
    font-size: 12px;
    line-height: 20px;
    color: #999;
    div{
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: red;
      display: inline-block;
      margin-right: 12px;
    }
    #yuan1{
      background-color: #fbda41;
    }
    #yuan2{
      background-color: #c4d7d6;
    }
    #yuan3{
      background-color: #f0a1a8;
    }
  }
}
</style>
